<template>
  <div>
    <BigpicWidget
      bgurl="p_news.jpg"
      ch="新闻资讯"
      en="NEWS AND INFORMATION"
    ></BigpicWidget>
    <BreadCrum
      :listLeft="listLeft"
      :listRight="listRight"
    ></BreadCrum>
    <div class="content">
      <div class="news_box">
        <div class="news_content">
          <div class="news_list">
            <NewsInfoWidget
              v-for="news in newsData"
              :key="news.articleId"
              :time="news.time"
              :title="news.title"
              :desc="news.desc"
              :imgurl="news.imgurl"
              :articleId="news.articleId"
            ></NewsInfoWidget>
          </div>
          <div class="pagination_box">
            <ul class="pagination justify-content-center">
              <li class="page-item previous disabled">
                <a href="javascript:;" class="page-link">←</a>
              </li>
              <li class="page-item active">
                <a href="javascript:;" class="page-link">1</a>
              </li>
              <li class="page-item">
                <a href="javascript:;" class="page-link">2</a>
              </li>
              <li class="page-item">
                <a href="javascript:;" class="page-link">3</a>
              </li>
              <li class="page-item next">
                <a href="javascript:;" class="page-link">→</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BigpicWidget from '@/components/BigpicWidget.vue'
import NewsInfoWidget from '@/components/NewsInfoWidget.vue'
import BreadCrum from '@/components/BreadCrum.vue'
import newsData from '@/fake-data/news'

export default {
  components: {
    BigpicWidget,
    NewsInfoWidget,
    BreadCrum
  },
  data () {
    return {
      newsData,
      listLeft: ['公司新闻', '行业资讯', '学习强国', '党建活动'],
      listRight: ['首页', '/', '新闻资讯']
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  background: #f5f5f5;
  .news_box {
    max-width: 1640px;
    min-height: 300px;
    padding: 60px 20px;
    margin: 0 auto;
    .news_content {
      background: #fff;
      padding: 30px;
      .news_list {
        width: 100%;
        margin: 0 auto;
        padding: 0 15px;
      }
    }
  }
}
</style>
